<template>
  <div class="tctk_xs">
    <!-- 筛选栏 -->
    <div class="query">
      <my-form :list="filter" @changeFormData="changeConditions"></my-form>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="search">搜索</my-button>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="reset">重置</my-button>
    </div>
    <!-- 主体 -->
    <div class="container">
      <!-- 操作栏 -->
      <div class="action">
        <div class="list-refresh">
          <my-dropdown-list
            :list="tableColumn"
            @change="changeTableColumn"
          ></my-dropdown-list>
          <div class="iconfont icon" @click="refreshdata">&#xe74a;</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table
          v-if="tableHeight"
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
          @selection-change="selectionChange"
        >
          <el-table-column
            v-if="tableColumn.type.show"
            prop="type"
            label="平台"
            width="100"
          >
            <template slot-scope="scope">{{
              platfromChange(scope.row.type)
            }}</template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.avatar.show"
            prop="avatar"
            label="用户信息"
            min-width="200"
          >
            <template slot-scope="scope">
              <div class="slot-row">
                <img :src="scope.row.avatar" alt="" class="avatar" />
                <div>{{ scope.row.nickname }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.movie.show"
            prop="movie"
            label="视频"
            width="100"
          >
            <template slot-scope="scope">
              <my-button
                v-if="scope.row.item_id_new == '已删除'"
                bgc="#fff"
                border="#d3d3d3"
                fontColor="#d3d3d3"
                >{{ scope.row.item_id_new }}</my-button
              >
              <my-button
                v-if="scope.row.item_id_new == '已分享'"
                bgc="#e29c45"
                >{{ scope.row.item_id_new }}</my-button
              >
              <my-button
                v-if="scope.row.item_id_new == '不宜公开'"
                bgc="#f5f5f5"
                fontColor="#949494"
                >{{ scope.row.item_id_new }}</my-button
              >
              <my-button
                v-if="scope.row.item_id_new == '审核中'"
                bgc="#fcc72c"
                >{{ scope.row.item_id_new }}</my-button
              >

              <my-button
                v-if="scope.row.item_id_new == '未分享'"
                bgc="#ca6924"
                >{{ scope.row.item_id_new }}</my-button
              >
              <el-tooltip
                class="item"
                effect="light"
                :content="failedTooltip(scope.row)"
                placement="top-start"
              >
                <my-button
                  v-if="scope.row.item_id_new == '失败'"
                  bgc="#9b4400"
                  >{{ scope.row.item_id_new }}</my-button
                >
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.mobile.show"
            prop="mobile"
            label="联系方式"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="videodata" label="数据统计" min-width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.videodata_new" class="slot-row">
                <div class="icon-block">
                  <div class="iconfont icon">&#xe657;</div>
                  <div class="number">
                    {{ scope.row.videodata_new.comment_count }}
                  </div>
                  <div class="line"></div>
                </div>
                <div class="icon-block">
                  <div class="iconfont icon">&#xe690;</div>
                  <div class="number">
                    {{ scope.row.videodata_new.digg_count }}
                  </div>
                  <div class="line"></div>
                </div>
                <div class="icon-block">
                  <div class="iconfont icon">&#xe63d;</div>
                  <div class="number">
                    {{ scope.row.videodata_new.play_count }}
                  </div>
                  <div class="line"></div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.createtime.show"
            prop="createtime"
            label="分享时间"
            width="200"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[15,25,30]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myForm from "@/components/myForm.vue";
import mySwitch from "@/components/mySwitch.vue";
import myInput from "@/components/myInput.vue";
import myDropdownList from "@/components/myDropdownList.vue";
import option from "@/data/option.js";
import dayjs from "dayjs";
export default {
  components: {
    myButton,
    myForm,
    mySwitch,
    myInput,
    myDropdownList,
  },
  data() {
    return {
      filter: {
        type: {
          type: "select",
          label: "类型",
          value: "",
          placeholder: "",
          op: "=",
          list: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "抖音",
              value: "douyin",
            },
            {
              label: "头条",
              value: "toutiao",
            },
            {
              label: "快手",
              value: "kuaishou",
            },
            {
              label: "西瓜",
              value: "xigua",
            },
            {
              label: "好看",
              value: "haokan",
            },
          ],
        },
        nickname: {
          type: "input",
          label: "名称",
          value: "",
          op: "%*%",
          placeholder: "请输入名称",
        },
        mobile: {
          type: "input",
          label: "联系方式",
          value: "",
          op: "%*%",
          placeholder: "请输入联系方式",
          list: option.vedioTypeList,
        },
      }, // 表格列表搜索条件
      dataSource: [],
      tableColumn: {
        type: {
          show: true,
          text: "平台",
        },
        avatar: {
          show: true,
          text: "用户信息",
        },

        movie: {
          show: true,
          text: "视频",
        },
        mobile: {
          show: true,
          text: "联系方式",
        },
        videodata: {
          show: true,
          text: "视频数据",
        },
        createtime: {
          show: true,
          text: "分享时间",
        },
      },
      platform: option.vedioTypeList,
      haoKanForm: {
        appid: {
          label: "APP ID",
          value: "",
          required: true,
          placeholder: "",
        },
        name: {
          label: "昵称",
          value: "",
          required: true,
          placeholder: "",
        },
        token: {
          label: "Token",
          value: "",
          required: true,
          placeholder: "",
        },
      },
      tableHeight: 0,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      selectedRows: [],
      dialogVisible: false,
      showHaoKan: false,
      showConfirm: false,
      timer: null,
    };
  },

  mounted() {
    this.tableHeight = document.querySelector(".table").offsetHeight;
    window.onresize = () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableHeight = document.querySelector(".table").offsetHeight;
      }, 500);
    };
    this.getData();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    // 获取列表
    async getData() {
      let filter = {};
      let op = {};
      for (let key in this.filter) {
        if (this.filter[key].value === "") {
          continue;
        }
        filter[key] = this.filter[key].value;
        op[key] = this.filter[key].op;
      }
      let reqBody = {
        qrid: this.$route.query.id,
        page: this.currentPage,
        limit: this.pageSize,
        op,
      };
      if (Object.keys(filter).length) {
        reqBody.filter = filter;
      }
      let res = await this.$api.tkfs_getData(reqBody);
      this.dataSource = res.data;
      this.total = res.count;
    },
    platfromChange(val) {
      let type = [
        { name: "DY", value: "douyin" },
        { name: "TT", value: "toutiao" },
        { name: "KS", value: "kuaishou" },
        { name: "XG", value: "xigua" },
        { name: "HK", value: "haokan" },
      ];
      let result = type.find((v) => v.value == val);
      return result.name;
    },
    search() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    // 重置筛选条件
    reset() {
      for (let key in this.filter) {
        this.filter[key].value = "";
        this.getData();
      }
    },
    //刷新
    refreshdata() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    // 表格
    // 选中行改变时
    selectionChange(selection) {
      this.selectedRows = selection;
    },

    // 页码跳转
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getData();
    },
     handleSizeChange(val) {
        this.pageSize=val;
        this.getData();

    },
    // 确认
    confirm() {},
    changeConditions(res) {
      this.filter[res.key].value = res.val;
    },
    // 控制表格显示哪几列
    changeTableColumn(key) {
      this.tableColumn[key].show = !this.tableColumn[key].show;
    },
    failedTooltip(row) {
      return dayjs(row.failtime).format("YYYY-MM-DD");
    },
  },
};
</script>

<style lang="less" scoped>
.tctk_xs {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 108px 0 0px 0;
  box-sizing: border-box;
}
.query {
  position: absolute;
  top: 52px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 45px;
  background-color: #fff;
  .button {
    margin-left: 20px;
    width: 70px;
    height: 30px;
  }
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 49px 0 80px 0;
  box-sizing: border-box;
  background-color: #fff;
  .action {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 58px;
    .add-del {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      /deep/ .button {
        width: 134px;
        height: 50px;
        margin-right: 15px;
        .text {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .list-refresh {
      display: flex;
      align-items: center;
      margin-left: 93.4%;
      width: 90px;
      .icon {
        font-size: 17px;
        color: rgba(212, 212, 212);
        cursor: pointer;
        margin-left: 20px;
      }
    }
  }
  .table {
    width: 100%;
    height: 100%;
    padding: 0 34px;
    box-sizing: border-box;
    /deep/ .header-row-class-name {
      height: 63px;
      th {
        background-color: #f0f4ff;
        .cell {
          text-align: center;
          font-weight: bold;
          color: #333;
        }
      }
    }
    /deep/ .row-class-name {
      height: 50px;
      td {
        padding: 0;
        .cell {
          display: flex;
          justify-content: center;
          text-align: center;
          font-size: 12px;
          .slot-row {
            display: flex;
            align-items: center;
            justify-content: center;
            .avatar {
              width: 35px;
              height: 35px;
              border-radius: 50%;
              margin-right: 10px;
            }
            .icon-block {
              display: flex;
              align-items: center;
              height: 18px;
              padding: 0 8px;
              border-right: 2px solid #c7c7c7;
              .icon {
                color: #333;
                font-size: 20px !important;
              }
              .number {
                color: #333;
                font-size: 16px;
                margin-left: 5px;
              }
            }
            :last-child {
              border-right: 0;
            }
          }
          .button {
            width: 60px;
            height: 24px;
            .text {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  /deep/ .active {
    background-color: #387CF7 !important;
  }
}

// 弹窗样式
.el-dialog__wrapper {
  /deep/ .el-dialog__header {
    font-size: 18px;
    padding: 14px 28px;
    border-bottom: 1px solid #d7d7d7;
    .el-dialog__close {
      &::before {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  /deep/ .el-dialog__body {
    padding: 25px 60px 15px 60px;
    box-sizing: border-box;
    .btn-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      height: 184px;

      .btn-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 154px;
        height: 38px;
        box-shadow: 0 0 5px 2px rgb(236, 235, 235) inset;
        border-radius: 5px;
        cursor: pointer;
        .btn {
          width: 148px;
          height: 32px;
          line-height: 32px;
          background-color: rgba(201, 171, 255);
          border-radius: 5px;
          text-align: center;
          color: #fff;
        }
      }
    }
    .desc {
      width: 100%;
      .desc-row {
        margin-bottom: 8px;
        line-height: 20px;
        font-size: 16px;
      }
    }
    .form {
      width: 100%;
      .myInput {
        margin: 15px;
        .input {
          width: 350px;
        }
        .label {
          width: 80px;
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0 20px 0;
      .button {
        width: 120px;
        margin-right: 15px;
      }
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0;
  }
}
.confirm {
  .body {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #333;
    font-size: 18px;
  }
}
</style>